<template>
  <div class="home-container" v-loading="loading">
    <div class="home-container-search">
      <el-input
        v-model="searchKey"
        style="width: 60%; height: 48px"
        placeholder="搜索职位关键词"
      >
        <template #append>
          <el-button
            :icon="Search"
            style="width: 68px"
            @click="gotoSearch(searchKey)"
          />
        </template>
      </el-input>
    </div>
    <div class="home-container-tag" v-loading="tagLoading">
      <div style="width: 75%">
        <el-container>
          <el-popover placement="right-start" width="50%">
            <template #reference>
              <el-aside
                style="
                  max-height: 288px;
                  width: 328px;
                  background-color: aqua;
                  border-radius: 12px;
                "
              >
                <el-scrollbar>
                  <el-menu>
                    <el-menu-item
                      v-for="item in tagDatas"
                      @mouseover="selectedTagData = item"
                    >
                      {{ item.name }}
                      <span
                        v-for="two in item.children"
                        style="color: var(--el-color-info); margin-left: 12px"
                      >
                        {{ two.name }}
                      </span>
                    </el-menu-item>
                  </el-menu>
                </el-scrollbar>
              </el-aside>
            </template>
            <div style="height: 262px">
              <p style="font-size: 18px; color: black; padding-bottom: 12px">
                {{ selectedTagData?.name }}
              </p>
              <el-scrollbar style="height: calc(100% - 25px)">
                <div
                  v-for="two in selectedTagData?.children"
                  style="display: flex; margin-bottom: 12px"
                >
                  <div style="font-size: 14px">
                    {{ two.name }}
                  </div>
                  <div style="margin-left: 28px">
                    <el-tag
                      v-for="three in two.children"
                      style="margin: 0px 8px 6px; cursor: pointer"
                      @click="gotoSearch(three.name)"
                    >
                      {{ three.name }}
                    </el-tag>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-popover>
          <el-main style="padding: 4px 16px">
            <el-image
              style="width: 740px; height: 280px; border-radius: 6px"
              src="./home_image.gif"
              fit="fill"
            />
          </el-main>
        </el-container>
      </div>
    </div>
    <div class="home-container-hot-job">
      <h1>热门职位</h1>
      <div
        style="
          width: 87%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-content: flex-start;
        "
      >
        <div
          v-for="item in hotJobDatas"
          @click="$router.push('/hr/info/job/' + item.id)"
          style="
            width: 30%;
            height: 128px;
            margin: 8px;
            padding: 12px;
            border-radius: 12px;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            cursor: pointer;
          "
        >
          <div style="display: flex; justify-content: space-between">
            <el-text type="success" size="large">{{ item.name }}</el-text>
            <el-text type="danger" size="large">
              {{ item.minSalary }}-{{ item.maxSalary }}K
            </el-text>
          </div>
          <div style="margin: 0px 4px">
            <el-tag type="info" style="margin-right: 8px">
              {{ item.tagName }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ item.location }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleEducationEnum(item.eduction) }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleExperienceEnum(item.experience) }}
            </el-tag>
            <el-tag type="info" style="margin-right: 8px">
              {{ handleJobType(item.type) }}
            </el-tag>
          </div>
          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin: 0px 8px;
            "
          >
            <div style="display: flex; align-items: center">
              <el-avatar
                :size="22"
                shape="square"
                :src="item.companyInfoVo.logo"
              ></el-avatar>
              <span style="margin-left: 8px">
                {{ item.companyInfoVo.name }}
              </span>
            </div>
            <span style="text-align: right">
              {{ item.companyInfoVo.industryName }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="home-container-hot-company">
      <h1>热门公司</h1>
      <div
        style="
          width: 87%;
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          align-content: flex-start;
        "
      >
        <div
          v-for="item in hotCompanyDatas"
          @click="$router.push('/hr/info/company/' + item.id)"
          style="
            width: 30%;
            margin: 8px;
            padding: 12px;
            border-radius: 12px;
            background-color: white;
            display: flex;
            cursor: pointer;
          "
        >
          <el-avatar :size="48" shape="square" :src="item.logo"></el-avatar>
          <div style="margin-left: 16px">
            <p>
              {{ item.name }}
              <el-tag type="info" style="margin-right: 8px">
                {{ item.industryName }}
              </el-tag>
            </p>
            <div style="margin: 0px 4px">
              <el-tag type="info" style="margin-right: 8px">
                {{ item.location }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleFinancingStage(item.financingStage) }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleScala(item.scala) }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { JobType } from '@/api/job/type'
import { reqGetHotJob } from '@/api/job'
import { ElMessage } from 'element-plus'
import {
  handleEducationEnum,
  handleExperienceEnum,
  handleJobType,
  handleFinancingStage,
  handleScala,
} from '@/constant/type'
import { reqGetCompanyJob } from '@/api/company'
import { CompanyType } from '@/api/company/type'
import { TagType } from '@/api/tag/type'
import { reqGetAllTag } from '@/api/tag'
import { useRouter } from 'vue-router'

onMounted(() => {
  getHotJob()
  getHotCompany()
  getAllTag()
})

const router = useRouter()

const searchKey = ref('')
const tagDatas = ref<TagType[]>()
const selectedTagData = ref<TagType>()
const hotJobDatas = ref<JobType[]>()
const hotCompanyDatas = ref<CompanyType[]>()
const loading = ref(false)
const tagLoading = ref(false)

const getHotJob = async () => {
  try {
    loading.value = true
    const { data } = await reqGetHotJob()
    hotJobDatas.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const getHotCompany = async () => {
  try {
    loading.value = true
    const { data } = await reqGetCompanyJob()
    hotCompanyDatas.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const getAllTag = async () => {
  let storageTag = sessionStorage.getItem('allTag')
  if (storageTag != null) {
    tagDatas.value = JSON.parse(storageTag)
    return
  }
  try {
    tagLoading.value = true
    const { data } = await reqGetAllTag()
    sessionStorage.setItem('allTag', JSON.stringify(data.data))
    tagDatas.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    tagLoading.value = false
  }
}

const gotoSearch = (data: string) => {
  if (data) {
    router.push({
      name: 'hrjob',
      query: {
        q: data,
      },
    })
  } else {
    ElMessage.error('请输入搜索关键词')
  }
}
</script>

<style scoped lang="scss">
.home-container {
  max-width: 100vw;
  background: #dcdcdc8d;

  .home-container-search {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .home-container-tag {
    height: 288px;
    display: flex;
    justify-content: center;
  }

  .home-container-hot-job {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .home-container-hot-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 16px 0;
}
</style>
